{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button, fxa_email_form with context %}
{% from "macros-protocol.html" import picto with context %}

{% extends "base-protocol-mozilla.html" %}

{# Issue 13019: Avoid duplicate content for English pages. #}
{%- block page_title_full -%}
  {%- if LANG == 'en-US' -%}
    Mozilla’s products — Mozilla (US)
  {%- elif LANG == 'en-GB' -%}
    Mozilla’s products — Mozilla (UK)
  {%- else -%}
    {{ ftl('firefox-products-mozilla-products') }} - Mozilla
  {%- endif -%}
{%- endblock -%}

{% block page_desc %}{{ ftl('firefox-products-mozillas-family-of-products') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('products') }}
{% endblock %}

{% set fx_android_url = play_store_url('firefox', 'products') %}
{% set fx_ios_url = app_store_url('firefox', 'products') %}
{% set fc_android_url = play_store_url('focus', 'products') %}
{% set fc_ios_url = app_store_url('focus', 'firefox-browsers-mobile-focus') %}

{% set referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=products' %}
{% set _entrypoint = 'mozilla.org-products' %}

{% set icon_external = '<span class="mzp-c-button-icon-end" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M9.25 1.5h4.19L7.12 7.82l1.06 1.06 6.32-6.32v4.19H16V0H9.25z"/><path fill="currentColor" d="M12 9h-1.5v5.5h-9v-9H7V4H0v12h12z"/></svg></span>' %}
{% set icon_download ='<span class="mzp-c-button-icon-end" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><clipPath id="a"><path d="M0 0h16v16H0z"/></clipPath><g fill="currentColor" clip-path="url(#a)"><path d="M7.25 0v10.21L3.53 6.49 2.47 7.55 8 13.08l5.53-5.53-1.06-1.06-3.72 3.72V0zM16 14.5H0V16h16z"/></g></svg></span>' %}

{% block content %}
<main>
  <header class="mzp-l-content">
    <h1>{{ ftl('firefox-products-products') }}</h1>
    <p>
      {{ ftl('firefox-products-firefox-beginning-v2') }}
      {{ ftl('firefox-products-mozillas-family-of-products-sentence', fallback='firefox-products-mozillas-family-of-products') }}
    </p>
  </header>
  <section class="mzp-l-content mzp-l-columns mzp-t-content-nospace mzp-t-columns-three">
    <!-- Firefox  -->
    {% call picto(
      body=True,
      image=resp_img(
        url='protocol/img/logos/firefox/browser/logo.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
      <h2 class="mzp-c-picto-heading"><a href="https://www.firefox.com/{{ referrals }}" data-cta-text="Firefox" data-cta-position="heading">{{ ftl('firefox-products-firefox') }}</a></h2>
      <p>{{ ftl('firefox-products-get-the-browser-that-blocks') }}</p>
      {% set alt_copy = ftl('download-button-download-firefox') + " " + icon_download|safe %}
      <div class="show-else">{{ download_firefox_thanks(alt_copy=alt_copy, button_class='mzp-t-secondary mzp-t-lg') }}</div>
      <p class="show-android">{{ google_play_button(href=fx_android_url, id='playStoreLink-firefox') }}</p>
      <p class="show-ios">{{ apple_app_store_button(href=fx_ios_url, id='appStoreLink-firefox') }}</p>
    {% endcall %}

    <!-- Focus -->
    {% call picto(
      body=True,
      image=resp_img(
        url='protocol/img/logos/firefox/browser/focus/logo.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
      <h2 class="mzp-c-picto-heading"><a href="https://www.firefox.com/browsers/mobile/focus/{{ referrals }}" data-cta-text="Focus" data-cta-position="heading">{{ ftl('firefox-products-firefox-focus') }}</a></h2>
      <p>{{ ftl('firefox-products-your-dedicated-privacy') }}</p>
      <p>
        <span class="hide-ios">{{ google_play_button(href=fc_android_url, id='playStoreLink-focus') }}</span>
        <span class="hide-android">{{ apple_app_store_button(href=fc_ios_url, id='appStoreLink-focus') }}</span>
      </p>
    {% endcall %}

    <!-- Relay -->
    {% call picto(
      body=True,
      image=resp_img(
        url='protocol/img/logos/firefox/relay/logo.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
      <h2 class="mzp-c-picto-heading"><a href="https://relay.firefox.com/{{ referrals }}" data-cta-text="Relay" data-cta-position="heading" data-cta-type="relay">{{ ftl('firefox-products-relay') }}</a></h2>
      <p>{{ ftl('firefox-products-protect-your-real') }}</p>
      <p><a class="mzp-c-button mzp-t-product mzp-t-secondary" href="https://relay.firefox.com/{{ referrals }}#pricing" rel="external noopener" data-cta-text="Get Relay" data-cta-type="relay">{{ ftl('firefox-products-get-relay') }} {{ icon_external|safe }}</a>
    {% endcall %}

    <!-- Monitor -->
    {% call picto(
      body=True,
      image=resp_img(
        url='protocol/img/logos/firefox/monitor/logo.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
    {% if LANG.startswith('en-') %}
      {% set monitor_link = url('products.monitor.landing') %}
    {% else %}
      {% set monitor_link = "https://monitor.mozilla.org/?" + referrals %}
    {% endif %}
      <h2 class="mzp-c-picto-heading"><a href="{{ monitor_link }}" data-cta-text="Monitor" data-cta-position="heading">{{ ftl('firefox-products-mozilla-monitor') }}</a></h2>
      <p>{% if country_code == 'US' %}See if you’ve been part of a data breach. If so, let us automatically get your private info back for you and continually monitor your identity for new leaks.{% else %}{{ ftl('firefox-products-see-if-your-personal-information') }}{% endif %}</p>
      <p><a class="mzp-c-button mzp-t-product mzp-t-secondary" href="https://monitor.mozilla.org/{{ referrals }}" data-cta-text="Check for breaches">{% if LANG == 'en-US' %}Check for breaches now{% else %}{{ ftl('firefox-products-check-for-breaches') }}{% endif %} {{ icon_external|safe }}</a></p>
    {% endcall %}

    <!-- VPN -->
    {% call picto(
      body=True,
      image=resp_img(
        url='protocol/img/logos/mozilla/vpn/logo.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
      <h2 class="mzp-c-picto-heading"><a href="{{ url('products.vpn.landing') }}" data-cta-text="VPN" data-cta-position="heading">{{ ftl('firefox-products-mozilla-vpn') }}</a></h2>
      <p>{{ ftl('firefox-products-surf-stream-and-get-work-done') }}</p>
      <p><a class="mzp-c-button mzp-t-product mzp-t-secondary" href="{{ url('products.vpn.landing') + '#pricing' }}" rel="external noopener" data-cta-text="Get VPN">{{ ftl('firefox-products-get-mozilla-vpn') }}</a></p>
    {% endcall %}

    <!-- MDN Plus -->
    {% call picto(
      body=True,
      image=resp_img(
        url='img/logos/mdn/mdn-plus-logo.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
    <h2 class="mzp-c-picto-heading"><a href="https://developer.mozilla.org/{{ referrals }}" data-cta-text="MDN Plus" data-cta-position="heading">{{ ftl('firefox-products-mdn-plus') }}</a></h2>
      <p>{{ ftl('firefox-products-resources-for-developers') }}</p>
      <p>
        <a href="https://developer.mozilla.org/plus/{{ referrals }}" rel="external noopener" class="mzp-c-button mzp-t-product mzp-t-secondary" data-cta-text="Support MDN">{{ ftl('firefox-products-support-mdn') }} {{ icon_external|safe }}</a>
      </p>
    {% endcall %}

    <!-- Thunderbird -->
    {% call picto(
      body=True,
      image=resp_img(
        url='img/logos/thunderbird/logo-thunderbird.svg',
        optional_attributes={
          'class': 'mzp-c-picto-image',
          'width': '64',
          'height': '64',
          'loading': 'lazy'
        }
      ),
    ) %}
      <h2 class="mzp-c-picto-heading"><a href="https://www.thunderbird.net/{{ referrals }}" data-cta-text="Thunderbird" data-cta-position="heading">{{ ftl('firefox-products-thunderbird') }}</a></h2>
      <p>{{ ftl('firefox-products-access-all') }}</p>
      <p><a class="mzp-c-button mzp-t-product mzp-t-secondary" href="https://www.thunderbird.net/download/{{ referrals }}" rel="external noopener" data-cta-text="Thunderbird Download">{{ ftl('firefox-products-download-thunderbird') }} {{ icon_download|safe }}</a></p>
    {% endcall %}
  </section>


  {% include 'mozorg/includes/mozilla-account-promo.html' %}

</main>
{% endblock %}

{% block js %}
  {{ js_bundle('fxa_form') }}
  {{ js_bundle('products') }}
{% endblock %}
